<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane name="1">
                <span slot="label">
                    信息点报警
                    <el-badge v-if="sensorWarn.num>0" class="mark" :value="sensorWarn.text"/>
                </span>
                <SensorWarn @getCount="init"/>
            </el-tab-pane>

            <el-tab-pane name="2">
                <span slot="label">
                    信息点异常
                    <el-badge class="mark" :value="sensorError.text"/>
                </span>
                <SensorError @getCount="init"/>
            </el-tab-pane>

            <el-tab-pane name="3">
                <span slot="label">
                    网关到期
                    <el-badge class="mark" :value="gatewayExpire.text"/>
                </span>
                <GatewayExpire @getCount="init" />
            </el-tab-pane>

            <!--            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
        </el-tabs>
    </div>
</template>

<script>

import SensorWarn from './sensorWarn'
import SensorError from './sensorError'
import GatewayExpire from './gatewayExpire'

import {getWarnCount} from '@/api/equipment/sensor'
import {unProcessCount} from '@/api/report/sensorError'
import {unProcessCount as gatewayExpireUnProcessCount} from '@/api/report/gatewayExpire'

export default {
    name: 'index',
    data() {
        return {
            activeName: '1',
            // 信息点未处理条数
            sensorWarn: {
                num: 0,
                text: ''
            },
            sensorError: {
                num: 0,
                text: ''
            },
            gatewayExpire: {
                num: 0,
                text: ''
            }
        }
    },
    components: {
        SensorWarn,
        SensorError,
        GatewayExpire
    },
    created() {
        this.init()
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event)
        },
        init() {
            console.log(111)
            getWarnCount().then(response => {
                this.sensorWarn.num = response.data
                this.sensorWarn.text = this.sensorWarn.num
                if (this.sensorWarn.num > 99) {
                    this.sensorWarn.text = '99+'
                }
            })

            unProcessCount().then(response => {
                this.sensorError.num = response.data
                this.sensorError.text = this.sensorError.num
                if (this.sensorError.num > 99) {
                    this.sensorError.text = '99+'
                }
            })

            gatewayExpireUnProcessCount().then(response => {
                this.gatewayExpire.num = response.data
                this.gatewayExpire.text = this.gatewayExpire.num
                if (this.gatewayExpire.num > 99) {
                    this.gatewayExpire.text = '99+'
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .pagination-container {
    position: relative;
    height: 40px;
    margin-bottom: 10px;
    margin-top: 15px;
    padding: 10px 20px !important;
}

//::v-deep .el-tabs__nav .el-tabs__item {
//    height: 100px;
//    line-height: 100px;
//}
</style>
